<template>
  <div class="easy-container flex">
    <div class="cell flex-1">
      <div class="flex flex-wrap">
        <router-link :to="`/users/${user.id}`" class="title link">{{ user.nickname }}</router-link>
        <span class="info">&nbsp;{{ item.desc }}&nbsp;</span>
        <router-link :to="item.path" class="title link">
          {{ $va.plainText(item.msg1) }}
        </router-link>
      </div>
      <div>{{ $va.plainText(item.msg2) }}</div>
    </div>
    <div class="cell shrink-0">
      <timeago2 :date-time="item.created_at" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'component-activities-list-item',
  props: {
    item: Object,
  },
  computed: {
    ...mapState({ user: 'showingUser' }),
  },
};
</script>

<style></style>
